<template>
  <!--  受影响设备 -->
  <div style="height: 100%;display: flex;flex-direction: column;">
    <div class="cardTitle flexBetween padding5-10 fontSize18 fontWeight">
      <!-- <div class="titleName" @click="PortReport">预计受影响设备及用户</div> -->
      <div class="titleName">预计受影响设备及用户</div>
      <a @click="showMoreDialog" style="color: #fff; text-decoration: none;">更多<i class="el-icon-d-arrow-right"
          color="#fff"></i></a>
    </div>
    <div class="flexBetween" style="flex: 1;">
      <div class="equipmentMain height100 width30">
        <div class="title-style flexBetween padding5-10">
          <div class="borderLeftStyle">主网设备</div>
        </div>
        <div class="main backgroundColor">
          <el-carousel :height="zwsbContHeight" indicator-position="none" loop arrow="never">
            <el-carousel-item>

              <div class="textCenter shuju">
                <div @click="showDialog('bdz33')"><a class="fontWeight">{{ bdz33.length }}</a></div>
                <div class="white fontSize14">220kV主变</div>
              </div>
              <div class="textCenter shuju">
                <div @click="showDialog('bdz32')"><a class="fontWeight">{{ bdz32.length }}</a></div>
                <div class="white fontSize14">110kV主变</div>
              </div>
              <div class="textCenter shuju">
                <div @click="showDialog('bdz25')"><a class="fontWeight">{{ bdz25.length }}</a></div>
                <div class="white fontSize14">35kV主变</div>
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div class="textCenter shuju">
                <div @click="showDialog('xl33')"><a class="fontWeight">{{ xl33.length }}</a></div>
                <div class="white fontSize14">220kV线路</div>
              </div>
              <div class="textCenter shuju">
                <div @click="showDialog('xl32')"><a class="fontWeight">{{ xl32.length }}</a></div>
                <div class="white fontSize14">110kV线路</div>
              </div>
              <div class="textCenter shuju">
                <div @click="showDialog('xl25')"><a class="fontWeight">{{ xl25.length }}</a></div>
                <div class="white fontSize14">35kV线路</div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="equipmentMain width80 flex-container">
        <div class="MainTopBox">
          <div class="title-style flexBetween padding5-10">
            <div class="borderLeftStyle">配网设备</div>
          </div>
          <div class="mainTop backgroundColor">
            <div class="flexAround" style="padding-bottom:10px">
              <div class="textCenter" @click="showDialog('pdxl25')">
                <div><a class="fontWeight">0</a></div>
                <div class="white fontSize14">10kV线路</div>
              </div>
              <!-- <div class="textCenter">
                <div><a class="fontWeight">1088</a></div>
                <div class="white fontSize14">台变</div>
              </div> -->
            </div>
          </div>
        </div>
        <div class="MainBottomBox height50">
          <div class="title-style flexBetween padding5-10">
            <div class="borderLeftStyle">台区及用户</div>
          </div>
          <div class="mainBottom backgroundColor" style="height:78.5%;display: flex;">
            <div id="leftLine" style="width:50%;height:100%;">
              <!-- <BarCharts :option="option1" chartId="yjglsysyx1" barChartsId="yjglsysyx2"></BarCharts> -->
            </div>
            <div id="rightBar" style="width:50%;height:100%;">
              <!-- <BarCharts :option="option2" chartId="yjglsysyx3" barChartsId="yjglsysyx4" :barColors="yhBarColors"></BarCharts> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <LsdDialog :dialogConfig="dialogConfig" @close="close">
        <div class="box" slot="dialog" v-if="false">
          <!-- 列表筛选 -->
          <filterTitle @query="query" @reset="reset">
            <el-form slot="filter" class="form" ref="form" :model="form" inline size="small" label-width="130px">
              <el-form-item :label="item.label + '：'" v-for="(item, index) in formData" :key="index" :prop="item.id">
                <LsdForm :compData="item" :form="form" @node-click="deptChoose(arguments, item)" />
              </el-form-item>
            </el-form>
          </filterTitle>
          <!-- 列表表格 -->
          <LsdTable slot="gjxm" :paginationAtrrs="AffectedUsers.paginationAtrrs" :compRef="AffectedUsers.compRef"
            ref="gjxm" :columns="AffectedUsers.columns" :title="AffectedUsers.title" :actions="AffectedUsers.actions"
            :tableData="AffectedUsers.tableData" :tableAttr="AffectedUsers.tableAttr"
            :isShowPage="AffectedUsers.isShowPage" :isSelectFlag="AffectedUsers.isSelectFlag"
            :isSequenceFlag="AffectedUsers.isSequenceFlag" @pageChange="handleSizeChange" />
        </div>
        <!-- 接入gis数据 -->
        <div class="box" slot="dialog">
          <el-table :data="sbinfoData" style="width: 100%" :header-cell-style="header_cell_style" border
            :cell-style="{ fontSize: '16px' }" class="banci-table" :height="mainTableHeight">
            <el-table-column fixed align="center" label="序号" type="index" width="100"></el-table-column>
            <el-table-column :prop="item.prop" :label="item.label" align="center" v-for="(item, i) of tableColumns"
              :key="i" show-overflow-tooltip></el-table-column>
          </el-table>
        </div>
      </LsdDialog>
    </div>
  </div>
</template>

<script>
import { getPortReports, getUnitTreeApi } from "@/api/EarlyWarningManagement/homepagecontent";
import { AffectedUsers, tableRed, tableOrange, tableYellow } from "./components/config";
import { effectFacilityListPage } from "@/api/EarlyWarningManagement/yjyp.js";
import { cityArr } from "@/config/geoCode";
import { getTongyong, getGisToken } from "@/api/gisMap";
// import BarCharts from "@/components/highCharts/BarCharts.vue";
export default {
  name: "AffectEquipment",
  // components: { BarCharts },
  computed: {
    mainTableHeight() {
      return (window.innerHeight * 0.85 - 180) + "px";
    }
  },
  data() {
    return {
      bdz35: [],
      bdz33: [],
      bdz32: [],
      bdz25: [],
      xl35: [],
      xl33: [],
      xl32: [],
      xl25: [],
      pdxl25: [],
      sbinfoData: [],
      yhBarColors: [{ color2: "rgba(34, 188, 70, 0.9)", color1: "rgba(111, 240, 147, 0.9)" }],
      option1: {
        barWidth: 24, // 柱子宽度
        basePointX: 36,
        ylib: 14, // y1点距离底部距离
        offsetHeight: 6, // 顶部和底部菱形突出的高度
        yNum: 5, // Y轴分数
        canvasH: "80%",
        qyNum: 5,
        tooltipXandY: {
          ch1: 90,
          ch2: 30,
          ch3: 96
        },
        grid: {
          left: 50, // 左边距离
          right: 0, // 右边距离
          top: 20,
          bottom: 6,
          containLabel: true
        },
        legends: ["用户"],
        legendPosition: "bottom",
        legFontSize: 12,
        tooltipdw: "",
        xAxis: [
          {
            type: "category",
            nameTextStyle: {
              color: "#fff"
            },
            fontSize: 12,
            data: ["03-23", "03-24", "03-25"],
            axisLine: {
              lineStyle: {
                color: "#22588F"
              }
            }
          }
        ],
        yAxis: {
          type: "value",
          name: "",
          nameTextStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        series: [[1200], [955], [712]]
      },
      option2: {
        barWidth: 24, // 柱子宽度
        basePointX: 36,
        ylib: 14, // y1点距离底部距离
        offsetHeight: 6, // 顶部和底部菱形突出的高度
        yNum: 5, // Y轴分数
        canvasH: "80%",
        qyNum: 5,
        tooltipXandY: {
          ch1: 90,
          ch2: 30,
          ch3: 96
        },
        grid: {
          left: 50, // 左边距离
          right: 0, // 右边距离
          top: 20,
          bottom: 6,
          containLabel: true
        },
        legends: ["台区"],
        legendPosition: "bottom",
        legFontSize: 12,
        tooltipdw: "",
        xAxis: [
          {
            type: "category",
            nameTextStyle: {
              color: "#fff"
            },
            fontSize: 12,
            data: ["03-23", "03-24", "03-25"],
            axisLine: {
              lineStyle: {
                color: "#22588F"
              }
            }
          }
        ],
        yAxis: {
          type: "value",
          name: "",
          nameTextStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        series: [[800], [620], [555]]
      },
      zwsbContHeight: "0px",
      header_cell_style: {
        textAlign: "center",
        backgroundColor: "#B1C8F9",
        border: "1px solid #ccc",
        fontSize: "16px",
        color: "#333"
      },
      dialogConfig: {
        title: "预计受影响设备",
        isShow: false, // 弹窗显示隐藏
        btnList: [],
        width: "70%"
      },
      tableColumns: [
        {
          prop: "sbmc",
          label: "设备名称"
        },
        {
          prop: "dydj",
          label: "电压等级"
        },
        {
          prop: "sbzlx",
          label: "设备类型"
        },
        {
          prop: "ssds",
          label: "所属地市"
        },
        {
          prop: "yxdw",
          label: "运行单位"
        }
      ],
      form: {
        facilityName: "", // 设备名称
        facilityTypeCode: "", // 设备类型
        unitId: "",
        voltageClasses: "", // 电压等级
        operationUnitId: "", // 运维单位
        operationGroupId: "", // 运维班组
        facilityStateCode: "", // 设备状态
        revolveStartDate: "", // 投运日期
        revolveEndDate: ""
      },
      AffectedUsers: AffectedUsers,
      tableRed: tableRed, // 红色标准
      tableOrange: tableOrange, // 橙色标准
      tableYellow: tableYellow, // 黄色标准
      formData: [
        {
          elType: "input",
          id: "facilityName",
          label: "设备名称",
          attrs: {
            value: "",
            size: "small"
          }
        },
        {
          elType: "select",
          id: "facilityTypeCode",
          label: "设备类型",
          attrs: {
            value: "",
            size: "small",
            // clearable: true,
            filterable: true,
            "collapse-tags": true
          },
          options: []
        },
        // {
        //   elType: "select",
        //   id: "unitId",
        //   label: "所属单位",
        //   attrs: {
        //     value: "",
        //     // clearable: true,
        //     size: "small",
        //     filterable: true,
        //     "collapse-tags": true
        //   },
        //   options: []
        // },
        {
          elType: "selectTree",
          id: "unitName",
          label: "所属单位",
          attrs: {
            value: "",
            size: "medium",
            filterable: true,
            "collapse-tags": true
          },
          options: {
            attrs: {
              value: ""
            }
          },
          treeData: {
            attrs: {
              data: []
            },
            props: {
              children: "children",
              label: "orgName",
              value: "id"
            }
          }
        },
        {
          elType: "select",
          id: "voltageClasses",
          label: "电压等级",
          attrs: {
            value: "",
            // clearable: true,
            size: "small",
            filterable: true,
            "collapse-tags": true
          },
          options: []
        },
        {
          elType: "select",
          id: "operationUnitId",
          label: "运维单位",
          attrs: {
            value: "",
            size: "small",
            // clearable: true,
            filterable: true,
            "collapse-tags": true
          },
          options: [

          ]
        },
        {
          elType: "select",
          id: "operationGroupId",
          label: "运维班组",
          attrs: {
            value: "",
            size: "small",
            // clearable: true,
            filterable: true,
            "collapse-tags": true
          }
        },
        {
          elType: "select",
          id: "facilityStateCode",
          label: "设备状态",
          attrs: {
            value: "",
            size: "small",
            // clearable: true,
            filterable: true,
            "collapse-tags": true
          },
          options: [
            { label: "在运", value: "1" }
          ]
        },
        {
          elType: "dateTimePicker",
          id: "revolveStartDate",
          label: "投运日期",
          attrs: {
            value: "",
            size: "small",
            type: "datetimerange",
            clearable: true,
            "start-placeholder": "开始日期",
            "end-placeholder": "结束日期",
            "format": "yyyy-MM-dd",
            "value-format": "yyyy-MM-dd HH:mm:ss"
          }
        }
      ],
      pageNum: 1,
      pageSize: 10,
      data0: [], // 待接收
      data1: [], // 待接收
      xAxisData: []
    };
  },
  mounted() {
    for (let i = 2; i >= 0; i--) {
      this.xAxisData.push(this.getTime(i));

    }
    // 获取容器高度
    const height = document.querySelector(".main").offsetHeight;
    this.zwsbContHeight = height + "px";
    this.chart1 = this.$echarts.init(document.getElementById("leftLine"));
    this.initCharts(); // 初始化渲染echart图标 用户柱状图

    this.chart2 = this.$echarts.init(document.getElementById("rightBar"));
    this.initChart();// 台区柱状图
    this.getUnitTree();

    this.$eventBus.$on("affectCity", (name) => {
      getGisToken().then(res => {
        if (res.status === 200) {
          const data = res.data;
          if (data.code === 10000 && data.resultValue) {
            const token = data.resultValue.token;
            sessionStorage.setItem("gisMapToken", token);
            this.getSbCount(name);
          }
        }
      });
    });
  },
  methods: {
    getTime(N) {
      const tempDate = new Date(); // 获取今天的日期
      tempDate.setDate(tempDate.getDate() - N); // 今天的前N天的日期，N自定义
      const y = (tempDate.getMonth() + 1) < 10 ? "0" + (tempDate.getMonth() + 1) : (tempDate.getMonth() + 1);
      const d = tempDate.getDate() < 10 ? "0" + tempDate.getDate() : tempDate.getDate();
      return y + "-" + d;
    },
    getSbCount(name) {
      const obj = {};
      cityArr.forEach(el => {
        if (el.extName === name) {
          obj.type = el.type;
          obj.ssdsid = el.ssdsid;
        }
      });
      // 500kv主变 35
      // this.getSbList(obj, "35", "300000", "bdz35");
      // 220kv主变 33
      this.getSbList(obj, "33", "300000", "bdz33");
      // 110kv主变 32
      this.getSbList(obj, "32", "300000", "bdz32");
      // 35kv主变 25
      this.getSbList(obj, "25", "300000", "bdz25");
      setTimeout(() => {
        // 500kv线路
        // this.getSbList(obj, "35", "100000", "xl35");
        // 220kv线路
        this.getSbList(obj, "33", "100000", "xl33");
        // 110kv线路
        this.getSbList(obj, "32", "100000", "xl32");
        // 35kv线路
        this.getSbList(obj, "25", "100000", "xl25");
      }, 2000);
    },
    getSbList(obj, dydj, typeId, key) {
      const { type, ssdsid } = obj;
      let layerDefs = "";
      if (type === "ds") {
        layerDefs = `dydj=${dydj} and ssds='${ssdsid}'`;
      } else {
        layerDefs = `dydj=${dydj} and yxdw='${ssdsid}'`;
      }
      const params = { typeId, layerDefs };
      getTongyong(params).then(res => {
        if (res.status === 200 && res.data.code === 10000) {
          const data = res.data.resultValue.featureMap[typeId] || {};
          const arr = [];
          if (Object.keys(data).length > 0) {
            for (const key in data) {
              const newobj = {};
              data[key].forEach(el => {
                if (el.fieldName === "sbmc") el.transferredValue = el.codeValue;
                newobj[el.fieldName] = el.transferredValue;
              });
              arr.push(newobj);
            }
          }
          this[key] = arr;
        }
      });
    },
    showMoreDialog() {
      this.sbinfoData = [...this.bdz32, ...this.bdz33, ...this.xl32, ...this.xl33];
      this.dialogConfig.isShow = true;
    },
    showDialog(key) {
      if (key != "pdxl25") {
        this.sbinfoData = this[key] || [];
      } else {
        this.sbinfoData = [];
      }
      this.dialogConfig.isShow = true;
      // this.effectFacilityListPage();
    },
    close() { this.dialogConfig.isShow = false; },
    PortReport() {
      getPortReports({
        startDate: "2022-08-01",
        endDate: "2022-08-30"
      }).then(res => {
        console.log("接口信息", res);
      });
    },
    initCharts() {
      this.chart1.setOption(
        {
          tooltip: {
            trigger: "item",
            axisPointer: {
              type: "shadow"
            },
            backgroundColor: "rgba(0,24,34,0.25)",
            borderWidth: 0,
            textStyle: {
              color: "#fff"
            },
            formatter(params) {

              const finishedCount = this.data0[params.dataIndex];
              return `<div style='display: flex;align-items: center;width: 100px'>${params.name}</div><div style='display:flex;align-items: center;'><div style='width: 11px;height: 11px;background: #5cbcff;border-radius: 50%;margin-right: 10px'></div>用户: ${finishedCount}</div>`;
            }
          },
          legend: {
            itemGap: 7, // 图例之间的间隔
            selectedMode: false, // 是否可选择图例
            right: "-10%",
            bottom: "0",
            itemWidth: 12,
            itemHeight: 12,
            formatter: (name) => `{a|${name}} `,
            textStyle: {
              align: "left",
              backgroundColor: "transparent",
              color: "#fff",
              fontSize: 12,
              rich: {
                a: {
                  width: 55,
                  fontSize: 14,
                  lineHeight: 14
                }
              }
            }
          },
          grid: {
            top: "20%",
            right: "0%",
            bottom: "30%",
            left: "23%"
          },
          xAxis: {
            data: this.xAxisData,
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                // color: "#9ed2f9"
                color: "#fff"
              }
            }
          },
          yAxis: [
            {
              splitNumber: 2,
              minInterval: 1,
              name: "数量",
              nameTextStyle: {
                color: "#fff",
                aligh: "left"
              },
              splitLine: {
                // 网格线
                lineStyle: {
                  type: "dashed", // 设置网格线类型 dotted：虚线   solid:实线
                  color: "rgba(16,64,119)"// 网格线颜色
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#fff"
                }
              }
            }
          ],
          series: [
            {
              name: "用户",
              data: this.data0,
              type: "bar",
              stack: "plan",
              barWidth: 15,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#278dec"
                    },
                    {
                      offset: 1,
                      color: "#5cbcff"
                    }
                  ]
                }
              }
            },
            {
              data: [0, 0, 0, 0],
              type: "pictorialBar",
              symbol: "diamond",
              symbolOffset: [0, "50%"],
              symbolSize: [15, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: "#5cbcff"
                }
              }
            },
            {
              data: this.data0,
              type: "pictorialBar",
              symbol: "diamond",
              symbolPosition: "end",
              symbolOffset: [0, "-50%"],
              symbolSize: [15, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: {
                    colorStops: [
                      {
                        offset: 0,
                        color: "#278dec"
                      },
                      {
                        offset: 1,
                        color: "#5cbcff"
                      }
                    ]
                  }
                }
              }
            }
          ]
        }
      );
      //  获取数据
      // const option = {
      //   tooltip: {
      //     trigger: "axis",
      //     backgroundColor: "rgba(129,211,248,0.25)",
      //     borderColor: "transparent",
      //     textStyle: {
      //       color: "#fff"
      //     },
      //     axisPointer: {
      //       type: "none"
      //     }
      //   },
      //   legend: {
      //     data: ["用户"],
      //     bottom: -5,
      //     right: 15,
      //     itemWidth: 12,
      //     itemHeight: 12,
      //     textStyle: {
      //       color: "#fff"
      //     }
      //   },
      //   grid: {
      //     top: "10%",
      //     left: "2%",
      //     right: "2%",
      //     bottom: "12%",
      //     containLabel: true
      //   },
      //   xAxis: {
      //     type: "category",
      //     axisTick: { show: false },
      //     data: ["08-07", "08-08", "08-09"],
      //     axisLine: {
      //       lineStyle: {
      //         color: "#22588F"
      //       }
      //     },
      //     axisLabel: {// x轴文字的配置
      //       show: true,
      //       interval: 0,
      //       textStyle: {
      //         color: "#fff",
      //         fontSize: 12,
      //         fontFamily: "Microsoft YaHei UI"
      //       }
      //     }
      //   },
      //   yAxis: {
      //     type: "value",
      //     axisLine: {
      //       show: true,
      //       lineStyle: {
      //         color: "#22588F"
      //       }
      //     },
      //     axisLabel: {// y轴文字的配置
      //       show: true,
      //       textStyle: {
      //         color: "#fff"
      //       }
      //     },
      //     // max: 1200,
      //     min: 200,
      //     splitLine: {
      //       show: false
      //     }
      //   },
      //   series: [
      //     {
      //       name: "用户",
      //       type: "bar",
      //       barGap: 0,
      //       emphasis: {
      //         focus: "series"
      //       },
      //       itemStyle: {
      //         normal: {
      //           // 这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
      //           barBorderRadius: [5, 5, 0, 0]
      //         }
      //       },
      //       color: "#188CF1",
      //       barWidth: 15,
      //       data: [1032, 634, 990]
      //     }
      //   ]
      // };
      // var myChart = this.$echarts.init(document.getElementById("leftLine")); // 图标初始化
      // myChart.setOption(option); // 渲染页面
      // // 随着屏幕大小调节图标
      // window.addEventListener("resize", () => {
      //   myChart.resize();
      // });
    },
    // 台区柱状图
    initChart() {
      this.chart2.setOption(
        {
          tooltip: {
            trigger: "item",
            axisPointer: {
              type: "shadow"
            },
            backgroundColor: "rgba(0,24,34,0.25)",
            borderWidth: 0,
            textStyle: {
              color: "#fff"
            },
            formatter(params) {

              const finishedCount = this.data1[params.dataIndex];
              return `<div style='display: flex;align-items: center;width: 100px'>${params.name}</div><div style='display:flex;align-items: center;'><div style='width: 11px;height: 11px;background: #5cbcff;border-radius: 50%;margin-right: 10px'></div>用户: ${finishedCount}</div>`;
            }
          },
          legend: {
            itemGap: 7, // 图例之间的间隔
            selectedMode: false, // 是否可选择图例
            left: "10%",
            bottom: "0",
            itemWidth: 12,
            itemHeight: 12,
            formatter: (name) => `{a|${name}} `,
            textStyle: {
              align: "left",
              backgroundColor: "transparent",
              color: "#fff",
              fontSize: 12,
              rich: {
                a: {
                  width: 55,
                  fontSize: 14,
                  lineHeight: 14
                }
              }
            }
          },
          grid: {
            top: "20%",
            right: "0%",
            bottom: "30%",
            left: "23%"
          },
          xAxis: {
            data: this.xAxisData,
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                // color: "#9ed2f9"
                color: "#fff"
              }
            }
          },
          yAxis: [
            {
              splitNumber: 2,
              minInterval: 1,
              name: "数量",
              nameTextStyle: {
                color: "#fff",
                aligh: "left"
              },
              splitLine: {
                // 网格线
                lineStyle: {
                  type: "dashed", // 设置网格线类型 dotted：虚线   solid:实线
                  color: "rgba(16,64,119)"// 网格线颜色
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#fff"
                }
              }
            }
          ],
          series: [
            {
              name: "台区",
              data: this.data1,
              type: "bar",
              stack: "plan",
              barWidth: 15,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#ffb400"
                    },
                    {
                      offset: 1,
                      color: "#fbd180"
                    }
                  ]
                }
              }
            },
            {
              data: [0, 0, 0, 0],
              type: "pictorialBar",
              symbol: "diamond",
              symbolOffset: [0, "50%"],
              symbolSize: [15, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: "#ffb400"
                }
              }
            },
            {
              data: this.data1,
              type: "pictorialBar",
              symbol: "diamond",
              symbolPosition: "end",
              symbolOffset: [0, "-50%"],
              symbolSize: [15, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: {
                    colorStops: [
                      {
                        offset: 0,
                        color: "#ffb400"
                      },
                      {
                        offset: 1,
                        color: "#ffb400"
                      }
                    ]
                  }
                }
              }
            }
          ]
        }
      );
      // const option = {
      //   tooltip: {
      //     trigger: "axis",
      //     backgroundColor: "rgba(129,211,248,0.25)",
      //     borderColor: "transparent",
      //     textStyle: {
      //       color: "#fff"
      //     },
      //     axisPointer: {
      //       type: "none"
      //     }
      //   },
      //   legend: {
      //     bottom: -5,
      //     left: 15,
      //     itemWidth: 12,
      //     itemHeight: 12,
      //     data: ["台区"],
      //     textStyle: {
      //       color: "#fff"
      //     }
      //   },
      //   grid: {
      //     top: "10%",
      //     left: "2%",
      //     right: "2%",
      //     bottom: "12%",
      //     containLabel: true
      //   },
      //   xAxis: {
      //     type: "category",
      //     axisTick: { show: false },
      //     data: ["08-07", "08-08", "08-09"],
      //     axisLine: {
      //       lineStyle: {
      //         color: "#22588F"
      //       }
      //     },
      //     axisLabel: {// x轴文字的配置
      //       show: true,
      //       textStyle: {
      //         color: "#fff"
      //       }
      //     }
      //   },
      //   yAxis: {
      //     type: "value",
      //     axisLine: {
      //       show: true,
      //       lineStyle: {
      //         color: "#22588F"
      //       }
      //     },
      //     axisLabel: {// y轴文字的配置
      //       show: true,
      //       textStyle: {
      //         color: "#fff"
      //       }
      //     },
      //     // max: 20,
      //     interval: 5,
      //     min: 0,
      //     splitLine: {
      //       show: false
      //     }
      //   },
      //   series: [
      //     {
      //       name: "台区",
      //       type: "bar",
      //       emphasis: {
      //         focus: "series"
      //       },
      //       itemStyle: {
      //         normal: {
      //           // 这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
      //           barBorderRadius: [5, 5, 0, 0]
      //         }
      //       },
      //       color: "#F59168",
      //       barWidth: 15,
      //       data: [8, 15, 19]
      //     }
      //   ]
      // };
      // var myChart = this.$echarts.init(document.getElementById("rightBar"));
      // myChart.setOption(option);
      // window.addEventListener("resize", () => {
      //   myChart.resize();
      // });
    },
    // 跳转灾情信息列表
    /* goRouter(name) {
      this.$router.push({
        name: "DisasterInformationStatistics"
      })
    } */
    // 更多设备
    async effectFacilityListPage() {
      const parmas = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        facilityName: this.form.facilityName, // 设备名称
        facilityTypeCode: this.form.facilityTypeCode, // 设备类型
        unitId: this.form.unitId,
        voltageClasses: this.form.voltageClasses, // 电压等级
        operationUnitId: this.form.operationUnitId, // 运维单位
        operationGroupId: this.form.operationGroupId, // 运维班组
        facilityStateCode: this.form.facilityStateCode, // 设备状态
        revolveStartDate: this.form.revolveStartDate[0],
        revolveEndDate: this.form.revolveStartDate[1]
      };
      console.log("parmas", parmas);
      console.log("revolveStartDate", this.form.revolveStartDate);
      const res = await effectFacilityListPage(parmas);
      this.AffectedUsers.tableData = res.data;
      this.AffectedUsers.paginationAtrrs.total = res.total;

    },
    // 检索
    query() {
      this.effectFacilityListPage();
    },
    // 重置
    reset() {
      this.form = this.$options.data().form;
      this.effectFacilityListPage();
    },
    getUnitTree() {
      getUnitTreeApi().then(res => {
        this.formData[2].treeData.attrs.data = res;
      });
    },
    // 树状选择
    deptChoose(val, item) {
      this.$set(this.form, "unitName", val[0].orgName);
      this.$set(this.form, "unitId", val[0].orgCode);
    },
    // 分页
    handleSizeChange(val) {
      this.pageNum = val["current-page"];
      this.pageSize = val["page-size"];
      this.effectFacilityListPage();
    }
  }
};
</script>

<style scoped lang="less">
.cardTitleNew {
  background-color: rgba(38, 92, 255, 0.45);
  color: #fff;
  align-items: center;
}

.cardTitleNew a {
  font-weight: 400;
  font-size: 16px;
  cursor: pointer;
}

.main {
  margin: 0 10px;
  height: 86%;
}

.mainTop {
  margin: 0 10px;

  a {
    cursor: pointer;
    font-size: 30px;
    color: #3076e3;
    text-decoration: underline;
  }
}

.mainBottom {
  margin: 0 10px;
}

.shuju {
  height: 33%;
  padding: 10px;
  box-sizing: border-box;

  // div {
  //   height: 45%;
  // }

  a {
    cursor: pointer;
    font-size: 30px;
    color: #3076e3;
    text-decoration: underline;
  }
}

.flex-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.MainBottomBox {
  flex: 1;
}

.width30 {
  width: 30%;
}

.width80 {
  width: 80%;
}

.cardTitle a {
  font-weight: 400;
}

.title-style {
  color: #fff;
  align-items: center;
}
</style>
